<template>
    <section>
        <goback class="goback" :getName='goName'></goback>
        <div class="cardCoupon" v-for="(coupon, index) of coupon" :key=index>
            <div class="discount">
                <img src="../../assets/my/kdq.png">
                <div class="couponInfos">
                    <div class="couponInfo">
                        <div>
                            <div class="couponName">{{coupon.name}}</div>
                            <div class="useNow" @click="useNow(coupon)">立即使用</div>
                            <!-- <div class="cantUse">已过期</div> -->
                        </div>
                        <div>有限期 {{coupon.createTime | formatDate}} - {{coupon.endTime | formatDate}}</div>
                    </div>
                    <div class="couponValue"><span>￥</span>{{coupon.money/100}}</div>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
    import { InfiniteScroll } from 'mint-ui'
    import loadmore from '../../components/loadmore'
    import goback from '../../components/goback'
    import { userInfoGet, WXShare } from '../../libs/publicMethod'
    import { getVoucher } from '../../libs/interface' // 获取接口
    export default {
        components: { goback, loadmore, WXShare, userInfoGet, InfiniteScroll, getVoucher },
        data() {
            return {
                goName: '众筹卡券',
                userInfo: userInfoGet(),
                loading: false, // 下拉参数
                loadingDom: false,
                offset: sessionStorage.getItem('foundScrollOffset') ? JSON.parse(sessionStorage.getItem('foundScrollOffset')).offset || 0 : 0,
                coupon: [],
            }
        },
        methods: {
            useNow (obj) {
                let vm = this
                sessionStorage.setItem('coupon', JSON.stringify({ couponId: obj.id, coupon: true, money: obj.money, isFund: false, couponName: obj.name}))
                sessionStorage.removeItem('isFund')
                sessionStorage.setItem('points', JSON.stringify({ points: false }))
                vm.$router.push('/goods/' + obj.productId)
            },
        },
        mounted() {
            let vm = this
            let params = {
                memberId: vm.userInfo.id,
                type: 1,
                state: 0,
            }
            getVoucher(params, (data) => {
                if (data.code === 1) {
                    vm.coupon = data.payload

                    console.log(vm.coupon)
                } else {
                    vm.$toast('暂未请求到数据,请稍后再试')
                }
            })
        },
        filters: {
            formatDate(input) {
                var d = new Date(input)
                var year = d.getFullYear()
                var month = d.getMonth() + 1
                var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
                var hour = d.getHours()
                var minutes = d.getMinutes()
                var seconds = d.getSeconds()
                return year + '.' + month + '.' + day + ' ' + hour + ':' + minutes
            }
        }
    }
</script>
<style scoped>
.goback{
    background-color: #F01500;
    color: #333;
}
.cardCoupon{
    margin-top: 2.8%;
}
.discount{
    width: 92%;
    margin: 0 auto 4%;
    position: relative;
}
.discount img{
    display: block;
    width: 100%;
    height: 100%;
}
.couponInfos{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
}
.couponInfo{
    width: 72.7%;
    height: 100%;
    /* background-color: green; */
    display: flex;
    flex-direction: column;
}
.couponInfo .couponName{
    color: #F01500;
    font-size: .95rem;
}
.couponInfo .useNow{
    color: #F01500;
    font-size: .7rem;
    /* text-decoration: underline; */
    border-bottom: 1px solid #F01500;
    margin-bottom: 1%;
}
.cantUse{
    font-size: .7rem;
    margin-bottom: 1%;
}
.couponInfo>div:first-child{
    height: 56%;
    /* background-color: aquamarine; */
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 0 5%;
}
.couponInfo>div:last-child{
    height: 44%;
    /* background-color: sienna; */
    font-size: .7rem;
    display: flex;
    align-items: center;
    transform: scale(.75,.9);
    margin-left: -10%;
    color: #999;
}
.couponValue{
    width: 24%;
    font-size: 1.8rem;
    color: #fff;
    text-align: right;
}
.couponValue span{
    font-size: 1rem;
}
</style>